<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>


<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet"
	href="http://foundation.zurb.com/docs/assets/normalize.css" />

<script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>
	<div class="row">
		<div class="large-3 columns">
			<a href=""><img src="img/ocms_logo.png" /></a>
		</div>
		<div class="large-8 columns">
			<h2>Online Case Management System</h2>
			<h3>Connecting the needy and the donors</h3>
		</div>
	</div>
	<div class="row">
		<div class="large-12 columns">
			<nav class="top-bar">
				<ul class="title-area">
					<!-- Title Area -->
					<li class="name">
						<h1>
							<a href="#"> Menu</a>
						</h1>
					</li>
					<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
					<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
				</ul>

				<section class="top-bar-section">
					<!-- Left Nav Section -->
					<ul class="left">
						<li class="divider"></li>
						<li class="active"><a href="#">Main Item 1</a></li>
						<li class="divider"></li>
						<li><a href="#">Main Item 2</a></li>
						<li class="divider"></li>
						<li class="has-dropdown"><a href="#">Main Item 3</a>

							<ul class="dropdown">
								<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

									<ul class="dropdown">
										<li><label>Dropdown Level 2 Label</label></li>
										<li><a href="#">Dropdown Level 2a</a></li>
										<li><a href="#">Dropdown Level 2b</a></li>
										<li class="has-dropdown"><a href="#">Dropdown Level
												2c</a>

											<ul class="dropdown">
												<li><label>Dropdown Level 3 Label</label></li>
												<li><a href="#">Dropdown Level 3a</a></li>
												<li><a href="#">Dropdown Level 3b</a></li>
												<li class="divider"></li>
												<li><a href="#">Dropdown Level 3c</a></li>
											</ul></li>

										<li><a href="#">Dropdown Level 2f</a></li>
									</ul></li>
								<li class="divider"></li>
								<li><a href="#">See all &rarr;</a></li>
							</ul></li>
						<li class="divider"></li>
					</ul>

					<!-- Right Nav Section -->
					<ul class="right">
						<li class="divider hide-for-small"></li>
						<li class="has-dropdown"><a href="#">Main Item 4</a>

							<ul class="dropdown">
								<li><label>Dropdown Level 1 Label</label></li>
								<li class="has-dropdown"><a href="#" class="">Dropdown
										Level 1a</a>

									<ul class="dropdown">
										<li><a href="#">Dropdown Level 2a</a></li>
										<li><a href="#">Dropdown Level 2b</a></li>
										<li class="has-dropdown"><a href="#">Dropdown Level
												2c</a>

											<ul class="dropdown">
												<li><a href="#">Dropdown Level 3a</a></li>
												<li><a href="#">Dropdown Level 3b</a></li>

											</ul></li>
										<li><a href="#">Dropdown Level 2d</a></li>
										<li><a href="#">Dropdown Level 2e</a></li>

									</ul></li>
								

								<li class="divider"></li>
								<li><a href="#">See all &rarr;</a></li>
							</ul></li>
						<li class="divider"></li>
						<li class="has-form">
							<form>
								<div class="row collapse">
									<div class="small-8 columns">
										<input type="text">
									</div>
									<div class="small-4 columns">
										<a href="#" class="alert button round">Search</a>
									</div>
								</div>
							</form>
						</li>
						<li class="divider show-for-small"></li>
						<li class="has-form"><a class="button round" href="#">Button!</a></li>
					</ul>
				</section>
			</nav>
		</div>
		<hr />
	</div>
	<div class="row full-width">
		<hr />
		<div class="large-6 columns">
			<p>Site content &copy; 2013 Careerscale IT Consulting LLP</p>
		</div>
		<div class="large-6 columns">
			<ul class="inline-list right">
				<li><a href="http://careerscale.in">Home</a></li>
				<li><a href="http://careerscale.in/training">Training</a></li>
				<li><a href="http://careerscale.in/product-development/">Product
						development</a></li>

			</ul>
		</div>
	</div>


	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>')
	</script>

	<script src="js/foundation.min.js"></script>
	<!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.alerts.js"></script>
  
  <script src="js/foundation/foundation.magellan.js"></script>
  
  <script src="js/foundation/foundation.reveal.js"></script>
  
  <script src="js/foundation/foundation.tooltips.js"></script>
  
  <script src="js/foundation/foundation.clearing.js"></script>
  
  <script src="js/foundation/foundation.cookie.js"></script>
  
  <script src="js/foundation/foundation.joyride.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  <script src="js/foundation/foundation.section.js"></script>
  
  <script src="js/foundation/foundation.topbar.js"></script>
  
  -->

	<script>
		$(document).foundation();
		// $("#navigation").load("nav.html"); // Load the contents of nav.html
	</script>


	<div id="myModal" class="reveal-modal">
		<h2>Model dialog</h2>
		<p class="lead">Your couch. It is mine.</p>
		<p>Im a cool paragraph that lives inside of an even cooler modal.
			Wins</p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
</body>
</html>
